<template>
  <el-card shadow="never">
    <template #header>
      <span>{{ $t("form.public.publicRelease") }}</span>
      <span class="small-font-size ml20 text-secondary-color">{{ $t("form.public.publicReleaseDescription") }}</span>
    </template>
    <div class="body-wrap">
      <p class="desc-text m20">{{ $t("form.public.enableGenerateLink") }}</p>
      <el-switch
        v-model="publishStatus"
        class="ml25 mt10"
        @change="handlePublishChange"
      />
      <url-operate
        v-if="publishStatus"
        :link-url="createDataLink"
        class="mt20 ml25"
        qr-code-mode="download"
      />
      <div v-if="miniAppQrcodeUrl && publishStatus">
        <el-divider></el-divider>
        <div class="uniapp-qrcode">
          <img
            :src="`data:image/png;base64,${miniAppQrcodeUrl}`"
            class="miniapp-qrcode"
          />
        </div>
      </div>
      <el-divider />
      <ExtValue :publish-status="publishStatus" />
    </div>
  </el-card>
</template>

<script setup lang="ts" name="PublicPublish">
import UrlOperate from "./UrlOperate.vue";
import ExtValue from "./ExtValue/index.vue";

import {
  getFormStatusRequest,
  getMobileFormShareQrcodeRequest,
  publishFormRequest,
  stopPublishFormRequest
} from "@/api/project/publish";
import { i18n } from "@/i18n";
import { MessageUtil } from "@/utils/messageUtil";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getBaseUrlPath } from "@/utils/auth";
import { MyFormRole } from "@/api/project/form";
import { useFormInfo } from "@/stores/formInfo";
import { storeToRefs } from "pinia";

const publishStatus = ref(false);
const formKey = ref("");

const miniAppQrcodeUrl = ref("");

const getProjectStatus = () => {
  getFormStatusRequest(formKey.value).then(res => {
    publishStatus.value = res.data.status == 2;
  });
};

const handlePublishChange = (val: boolean) => {
  if (val) {
    publishProject();
  } else {
    stopPublishProject();
  }
};

const publishProject = () => {
  publishFormRequest({ formKey: formKey.value }).then(() => {
    publishStatus.value = true;
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
  });
};

const stopPublishProject = () => {
  stopPublishFormRequest({ formKey: formKey.value }).then(res => {
    if (res.data) {
      MessageUtil.success(i18n.global.t("formI18n.all.success"));
      getProjectStatus();
    }
  });
};

const getMiniAppQrCodeUrl = () => {
  getMobileFormShareQrcodeRequest(formKey.value).then(res => {
    miniAppQrcodeUrl.value = res.data;
  });
};

const route = useRoute();

const createDataLink = ref("");

const formInfoStore = useFormInfo();
const { authGroupInfo, myFormRole } = storeToRefs(formInfoStore);

onMounted(() => {
  formKey.value = route.query.key as string;
  getProjectStatus();
  getMiniAppQrCodeUrl();
  let url = getBaseUrlPath();
  createDataLink.value = `${url}/s/${formKey.value}`;
  if (myFormRole.value === MyFormRole.COLLABORATOR && authGroupInfo?.value?.enableUniqueLink) {
    createDataLink.value = createDataLink.value + "?ext=" + route.query.collaboratorId;
  }
});
</script>
<style lang="scss" scoped>
.body-wrap {
  height: 100%;
  overflow-x: hidden;
}

.miniapp-qrcode {
  width: 130px;
  height: 130px;
}

.uniapp-qrcode {
  margin-left: 50px;
}
</style>
